<template>
  <div>
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button v-show="id" :disabled="submitLoading" :loading="saveLoading" size="mini" type="primary" @click="submitForm(1)">保存</el-button>
      <el-button style="margin-right:20px" :disabled="saveLoading" :loading="submitLoading" size="mini" type="primary" @click="submitForm(2)">提交</el-button>
    </div>
    <div v-loading="dataLoading">
      <div style="margin-top:20px" class="qup-title-box"><span class="border" /><span>门店建设基础信息</span></div>
      <el-form
        ref="refForm1"
        :rules="formRulesConst"
        :model="formDataConst"
        size="mini"
        label-width="150px"
      >

        <el-row>
          <!-- 数据来源为手工新增时 可修改门店信息 -->
          <el-col v-if="!formData.constCode" :span="8">
            <el-form-item label="门店:" prop="shopCode">
              <input-with-dialog
                v-model="shop"
                :props="{label:'name',value:'code'}"
                :config="dialogConfigShop"
                @change="handleChangeShop"
              />
            </el-form-item>
          </el-col>
          <!-- 数据来源由选址触发slm时 不可修改门店信息 -->
          <el-col v-else :span="8">
            <el-form-item label="门店:" prop="shopCode">
              {{ formDataConst.shopName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!--由门店自动带出 -->
            <el-form-item label="门店编码:" prop="shopCode">
              {{ formDataConst.shopCode }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!--由门店自动带出 -->
            <el-form-item label="门店建设项目号:" prop="constCode">
              {{ formDataConst.constCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!--由门店自动带出 -->
            <el-form-item label="客户编码:" prop="clientCode">
              {{ formDataConst.clientCode }}
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <!--由门店自动带出 -->
            <el-form-item label="所属客户:" prop="clientName">
              {{ formDataConst.clientName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属办事处:" prop="officeName">
              {{ formDataConst.officeName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="办事处性质 :">
              {{ formDataConst.officeNature }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经销商姓名:" prop="customerName">
              {{ formDataConst.customerName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经销商电话:" prop="customerPhone">
              {{ formDataConst.customerPhone }}
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="门店类型:" prop="shopType">
              <el-select
                v-model="formDataConst.shopType"
                disabled
                placeholder="——"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shopTypeOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店业务类型:" prop="shopBizType">
              <el-select
                v-model="formDataConst.shopBizType"
                disabled
                multiple
                placeholder="——"
                style="width: 100%"
              >
                <el-option
                  v-for="item in bizTypeOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店城市级别:" prop="shopCityLevel">
              <el-select
                v-model="formDataConst.shopCityLevel"
                disabled
                placeholder="——"
                style="width: 100%"
              >
                <el-option
                  v-for="item in cityLevelOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="门店面积:" prop="shopArea">
              <el-input v-model.number="formDataConst.shopArea" placeholder="——" disabled>
                <span slot="suffix">㎡</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="门店详细地址:" prop="shopAddress">
              {{ formDataConst.shopAddress }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="门店营业状态:" prop="businessStatus">
              <el-select
                v-model="formDataConst.businessStatus"
                placeholder="——"
                disabled
                style="width: 100%"
              >
                <el-option
                  v-for="item in businessStateOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="门店建设范围:" prop="decorationRange">
              <el-checkbox-group
                v-model="formDataConst.decorationRange"
                @change="changeDecorationRange"
              >
                <el-checkbox
                  v-for="item in buildRangeOptions"
                  :key="item.dictCode"
                  :disabled="item.dictCode==='STORES'"
                  :label="item.dictCode"
                >{{ item.dictName }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 门店建设项目号数据来源为“选址评估时，这三个字段不允许修改 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="报图类型:" prop="marketType">
              <el-select
                v-model="formDataConst.marketType"
                :disabled="formDataConst.dataSource==='A'?true:false"
                placeholder="请选择"
                style="width: 100%"
                @change="changeMarketType"
              >
                <el-option
                  v-for="item in marketTypeOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店建设类型:" prop="constType">
              <el-select
                v-model="formDataConst.constType"
                placeholder="请选择"
                :disabled="formDataConst.dataSource==='A'?true:false"
                style="width: 100%"
              >
                <el-option
                  v-for="item in buildTypeOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商家类别:" prop="bizmanType">
              <el-select
                v-model="formDataConst.bizmanType"
                :disabled="formDataConst.dataSource==='A'?true:false"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in bizmanTypeOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!-- 若有门店建设项目号则自动带出，可手工修改，若没有则手工填写，可多选 -->
            <el-form-item label="装修形式:" prop="decorationForm">
              <el-select
                v-model="formDataConst.decorationForm"
                multiple
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in decorationOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :rules="[{required:true,message:'请选择',trigger:'change'}]" label="是否战略市场:" prop="isStrategyMarket">
              <el-radio-group v-model="formDataConst.isStrategyMarket">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="qup-title-box"><span class="border" /><span>测绘申请信息</span></div>
      <el-form
        ref="refForm2"
        :rules="formRulesApply"
        :model="formData"
        size="mini"
        label-width="150px"
      >
        <el-row>
          <el-col v-show="formDataConst.decorationRange&&formDataConst.decorationRange.indexOf('DOOR')>-1" :span="8">
            <!-- <el-col :span="8"> -->
            <el-form-item label="测绘申请门头面积:" prop="applyDheadArea">
              <el-input v-model.number="formData.applyDheadArea" maxlength="4">
                <span slot="suffix">㎡</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="测绘申请卖场总面积:" prop="applyShopTotalArea">
              <el-input
                v-model.number="formData.applyShopTotalArea"
                :disabled="formDataConst.marketType!=='NEW_MARKET'"
                maxlength="4"
              >
                <span slot="suffix">㎡</span>
              </el-input></el-form-item>
          </el-col>
          <el-col v-show="isNeedRefeshArea" :span="8">
            <el-form-item :rules="[{required:formDataConst.constType==='OVERALL_RENOVATE'|| formDataConst.constType==='PARTIAL_RENOVATE'|| formDataConst.constType==='EXTEND_RENOVATE',message:'请填写翻新面积'}]" label="翻新面积:" prop="refurbishArea">
              <el-input v-model.number="formData.refurbishArea" maxlength="4" @input="changeArea">
                <span slot="suffix">㎡</span>
              </el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-show="isNeedExtendArea" :span="8">
            <el-form-item :rules="[{required:formDataConst.constType==='EXTEND_RENOVATE' || formDataConst.constType==='EXTEND',message:'请输入扩建面积'}]" label="扩建面积:" prop="expansionArea">
              <el-input v-model.number="formData.expansionArea" maxlength="4" @input="changeArea">
                <span slot="suffix">㎡</span>
              </el-input></el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="卖场是否已拆除:" prop="isShopRemove">
              <el-select
                v-model="formData.isShopRemove"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预计报图区域:" prop="reportPicZone">

              <el-checkbox-group v-model="formData.reportPicZone">
                <el-checkbox v-for="item in belongRegionOptions" :key="item.areaCode" :label="item.areaCode">{{ item.areaName }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据来源:" prop="dataSource">
              <el-select
                v-model="formData.dataSource"
                placeholder="请选择"
                disabled
                style="width: 100%"
              >
                <el-option
                  v-for="item in dataSorceOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-show="formData.isShopRemove===0" :span="24">
            <el-form-item label="卖场未拆除原因:" prop="unremoveReason" :rules="[{required: !formData.isShopRemove, message: '请填写卖场未拆除原因'}]">
              <el-input v-model="formData.unremoveReason" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="测绘申请说明:" prop="applyDesc">
              <el-input v-model="formData.applyDesc" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!-- 自动获取登录账号对应的域账号 -->
            <el-form-item label="测绘申请人:" prop="applicantName">
              {{ formData.applicantName || this.$store.getters.user.data.userName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 自动获取当前服务器时间 -->
            <el-form-item label="测绘申请时间:" prop="applyTime">
              {{ formData.applyTime || nowTime() }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        v-for="item in fileTypeList"
        :key="item.id"
        v-loading="fileLoading"
      >
        <div class="qup-title-box"><span class="border" /><span>附件上传-{{ item.attachmentType }}(不少于5张)</span></div>
        <img-uploader
          :photo-list="item.fileList"
          :config-attachment-id="item.id"
          :file-type="item.fileTypeName"
          :config-attachment-type="item.attachmentType"
          @remove="removeFile"
          @upload-success="uploadSuccessFile"
        />
      </div>

      <!-- 原始图附件上传 -->
      <div
        v-for="item in originImgList"
        :key="item.id"
      >
        <div class="qup-title-box"><span class="border" /><span>附件上传-{{ item.attachmentType }}</span></div>
        <import-file
          :data="item.fileList"
          :file-type="item.fileTypeName"
          :config-attachment-id="item.id||''"
          :limit="20"
        />
      </div>
    </div>
  </div>
</template>
<script>
import importFile from '@/components/importFile'
import { nowTime } from '@/utils/tool'
import imgUploader from '@/components/importImg'
import BackPageMixin from '@/mixins/backPage'
import { getDictByPatchType } from '@/api/dataDict'
import { getDetailData, postConfigAttachmentTemplate, saveMapData, searchConstCode, searchOfficeNature } from '@/api/shopMap'
import { getShopAttachment, taskValide, searchCustomer, getAreaList } from '@/api/common.js'

export default {
  name: 'MapApply',
  components: { imgUploader, importFile },
  mixins: [BackPageMixin],
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      id: '',
      dataLoading: false,
      saveLoading: false,
      submitLoading: false,
      fileLoading: false,
      nowTime,
      originImgList: [], // 原始图2021/12/15新增
      shop: [],
      fileList: [],
      otherFileList: [],
      buildRangeOptions: [], // 门店建设范围
      marketTypeOptions: [], // 报图类型
      buildTypeOptions: [], // 门店建设类型
      buildTypeOptions1: [], // 门店建设类型截取
      bizmanTypeOptions: [], // 商家类型
      decorationOptions: [], // 装修形式
      belongRegionOptions: [], // 预计报图区域
      dataSorceOptions: [], // 数据来源
      shopTypeOptions: [], // 门店类型
      cityLevelOptions: [], // 城市级别
      businessStateOptions: [], // 门店营业状态
      bizTypeOptions: [], // 业务类型
      fileTypeList: [],
      imgLength: 0,
      isNeedRefeshArea: false,
      isNeedExtendArea: false,
      formDataConst: { // 门店建设基础信息
        id: '',
        businessStatus: '', // 门店营业状态2021/12/15新增
        dataSource: '',
        shopBizType: [],
        decorationRange: ['STORES'],
        shopMarketLevel: '',
        decorationForm: [],
        shopCode: '',
        shopName: '',
        constCode: '',
        officeNature: '',
        clientName: '',
        clientCode: '',
        officeName: '',
        officeCode: '',
        shopType: '',
        customerName: '',
        customerPhone: '',
        shopCityLevel: '',
        shopArea: undefined,
        shopAddress: '',
        marketType: '',
        constType: '',
        isStrategyMarket: undefined, // 是否战略市场
        bizmanType: '' // 商家类别
      },
      formData: {// 测绘申请信息
        shopConstructDTO: {},
        id: '',
        decorationRange: '',
        decorationForm: '',
        applyDheadArea: undefined,
        applyShopTotalArea: undefined,
        refurbishArea: undefined,
        expansionArea: undefined,
        isShopRemove: undefined,
        constCode: '',
        officeNature: '',
        dataSource: 'ARTIFICIAL',
        unremoveReason: '',
        applyDesc: '',
        isStrategyMarket: undefined, // 是否战略市场
        reportPicZone: []
      },
      formRulesConst: {
        decorationRange: [
          { required: true, message: '请选择门店建设范围', trigger: 'change' }
        ],
        constType: [
          { required: true, message: '请选择门店建设类型', trigger: 'change' }
        ],
        marketType: [
          { required: true, message: '请选择报图类型', trigger: 'change' }
        ],
        shopCode: [
          { required: true, message: '请选择门店', trigger: 'change' }
        ],
        decorationForm: [
          { required: true, message: '请选择装修形式' }
        ],
        bizmanType: [
          { required: true, message: '请选择商家类别' }
        ]
      },
      formRulesApply: {
        applyDheadArea: [
          { required: true, message: '请填写测绘申请门头面积', trigger: 'change' },
          { pattern: /^([0-9]\d*)$/, message: '请输入数字' }
        ],
        applyShopTotalArea: [
          { required: true, message: '请填写测绘申请卖场总面积', trigger: 'change' },
          { pattern: /^([0-9]\d*)$/, message: '请输入数字' }
        ],
        // refurbishArea: [
        //   { required: false, message: '请填写翻新面积', trigger: 'change' },
        //   { pattern: /^([0-9]\d*)$/, message: '请输入数字' }
        // ],
        // expansionArea: [
        //   { required: false, message: '请填写扩建面积', trigger: 'change' },
        //   { pattern: /^([0-9]\d*)$/, message: '请输入数字' }
        // ],
        reportPicZone: [
          { required: true, message: '请选择预计报图区域', trigger: 'change' }
        ],
        isShopRemove: [
          { required: true, message: '请选择卖场是否已拆除', trigger: 'change' }
        ],
        dataSource: [
          { required: false, message: '请选择数据来源', trigger: 'change' }
        ],
        // unremoveReason: [
        //   { required: false, message: '请填写卖场未拆除原因', trigger: 'change' }
        // ],
        applyDesc: [
          { required: true, message: '请填写测绘申请说明', trigger: 'change' }
        ]
      },
      dialogConfigShop: {
        title: '门店',

        filtersRaw: [{ 'id': 'status', 'property': 'status', 'value': '1', 'operator': '=' }, { 'id': 'agencyName', 'property': 'agencyName', 'value': '销售公司直营部', 'operator': '<>' }],
        interfacePath: `/select-service/api/v1/shop/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }]
      }
    }
  },
  watch: {
    'formDataConst.constType'(v) {
      this.formRuleFormat()
    },
    'formData.isShopRemove': {
      handler(v) {
        if (v === 0) {
          this.formRulesApply.unremoveReason[0].required = true
        } else {
          this.formRulesApply.unremoveReason[0].required = false
        }
      }
    },
    'formDataConst.decorationRange'(v) {
      if (v.indexOf('DOOR') === -1) {
        this.formData.applyDheadArea = undefined
        this.formRulesApply.applyDheadArea[0].required = false
      } else {
        this.formRulesApply.applyDheadArea[0].required = true
      }
    },
    // 门店建设类型
    async 'formDataConst.marketType'(v) {
      const { CONST_TYPE } = await getDictByPatchType(['CONST_TYPE'])
      if (v === 'NEW_MARKET') {
        this.buildTypeOptions = CONST_TYPE.slice(0, 2)
      } else {
        this.buildTypeOptions = CONST_TYPE.slice(2)
      }
    }

  },
  async  created() {
    this.id = this.$route.query.id
    if (this.id) {
      // this.$refs.refForm1.clearValidate()
      // this.$refs.refForm2.clearValidate()
      this.dataLoading = true
      await getDetailData(this.id).then(res => {
        if (res.success === 1) {
          this.formData = { ... { id: res.data.id || '',
            decorationRange: res.data.decorationRange || '',
            decorationForm: res.data.decorationForm || '',
            applyDheadArea: res.data.applyDheadArea || undefined,
            applyShopTotalArea: res.data.applyShopTotalArea || undefined,
            refurbishArea: res.data.refurbishArea || undefined,
            expansionArea: res.data.expansionArea || undefined,
            isShopRemove: res.data.isShopRemove || 1,
            constCode: res.data.constCode || '',
            officeNature: res.data.officeNature || '',
            dataSource: res.data.dataSource || '',
            unremoveReason: res.data.unremoveReason || '',
            applyDesc: res.data.applyDesc || '',
            reportPicZone: res.data.reportPicZone || ''
          }, ...res.data }

          this.$set(this.formData, 'reportPicZone', this.formData.reportPicZone ? this.formData.reportPicZone.split(',') : [])
          const { dataSource, id, businessStatus, decorationRange, shopCode, shopName, constCode, officeNature, clientName, clientCode, officeName, officeCode, shopType, shopBizType,
            customerName, customerPhone, shopCityLevel, shopArea, shopAddress, marketType, constType, bizmanType, decorationForm } = res.data.shopConstructDTO
          this.formDataConst = { dataSource, id, businessStatus, decorationRange, shopCode, shopName, constCode, officeNature, clientName, clientCode, officeName, officeCode, shopType, shopBizType,
            customerName, customerPhone, shopCityLevel, shopArea, shopAddress, marketType, constType, bizmanType, decorationForm }
          this.$set(this.formDataConst, 'isStrategyMarket', this.formData.isStrategyMarket)
          this.formDataConst.marketType = this.formData.marketType || '' // 报图类型
          this.formDataConst.constType = this.formData.constType || '' // 建设类型
          this.formDataConst.bizmanType = this.formData.bizmanType || '' // 商家类别

          this.formDataConst.decorationRange = this.formData.decorationRange ? this.formData.decorationRange.split(',') : []
          this.formDataConst.decorationForm = this.formData.decorationForm ? this.formData.decorationForm.split(',') : []

          this.formDataConst.shopBizType = this.formDataConst.shopBizType ? this.formDataConst.shopBizType.split(',') : []
        }
      })
    }
    this.getDictByPatchTypeShop()// 获取数据字典
    this.getFileType()// 获取附件
    this.shop = [{ code: this.formDataConst.shopCode, name: this.formDataConst.shopName }]
    this.getDictByPatchTypeAll()
    this.getAreaSelect()
    this.dataLoading = false
  },
  mounted() {
  },
  methods: {
    changeArea() {
      if (!this.formData.refurbishArea && !this.formData.expansionArea) this.formData.applyShopTotalArea = this.formData.applyShopTotalArea || 0
      else this.$set(this.formData, 'applyShopTotalArea', (this.formData.refurbishArea || 0) + (this.formData.expansionArea || 0))
    },
    // isNeedRefeshArea 是否需要填写翻新面积
    // isNeedExtendArea 是否需要填写扩建面积
    formRuleFormat() {
      this.isNeedRefeshArea = this.formDataConst.constType === 'OVERALL_RENOVATE' || this.formDataConst.constType === 'PARTIAL_RENOVATE' || this.formDataConst.constType === 'EXTEND_RENOVATE'
      this.isNeedExtendArea = this.formDataConst.constType === 'EXTEND_RENOVATE' || this.formDataConst.constType === 'EXTEND'
      if (!this.isNeedRefeshArea) this.formData.refurbishArea = undefined// 测量翻新面积
      if (!this.isNeedExtendArea) this.formData.expansionArea = undefined// 测量扩建面积
      this.changeArea()
    },
    async getFileType() {
      this.fileLoading = true
      await postConfigAttachmentTemplate().then(res => {
        if (res.success === 1) {
        // 根据modelId获取每个配置id
          this.fileTypeList = res.data.records.filter(row => row.attachmentType === '卖场内部大场景照片' && row.enable === 1)
          this.originImgList = res.data.records.filter(row => row.attachmentType === '原始图' && row.enable === 1)

          this.fileTypeList.forEach(row => {
            this.$set(row, 'fileList', [])
          })
          this.originImgList.forEach(row => {
            this.$set(row, 'fileList', [])
          })
          this.fileLoading = false
        }
      })
      if (this.id) {
        this.getFiles()// 获取文件，图片列表
      }
    },
    changeDecorationRange(val) {
    },
    changeMarketType(data) {
      if (data === 'NEW_MARKET') { this.formDataConst.constType = '' } else { this.formDataConst.constType = '' }
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        res.data.map(row => {
          if (row.attachmentType === '卖场内部大场景照片') this.fileTypeList[0].fileList.push(row)
          else if (row.attachmentType === '原始图') this.originImgList[0].fileList.push(row)
          else this.otherFileList.push(row)
        })
        this.imgLength = this.fileTypeList[0].fileList.length
      })
    },
    async  handleChangeShop(data) {
      if (data.length !== 0) {
        // 验证当前选择门店是否有测绘任务
        const isValid = await taskValide({ shopCode: data[0].code })
        if (isValid.code) {
          this.shop = [{ code: '', name: '' }]
          this.clearFormConst()
          this.$message.warning(isValid.msg)
          return
        }
        // 根据门店下的客户code查询 对应的经销商信息
        searchCustomer(data[0].customerCode, 'storemapping').then(res => {
          if (res.success === 1 && res.data.records.length > 0) {
            if (['全友经销商', '乡镇经销商'].includes(res.data.records[0].twoCategoryName)) {
              this.formDataConst.customerName = res.data.records[0].contactName// 经销商
              this.formDataConst.customerPhone = res.data.records[0].contactPhone// 经销商电话
            } else {
              this.shop = [{ code: '', name: '' }]
              this.clearFormConst()
              this.$message.warning('客户二级分类应为【全友经销商、乡镇经销商】')
              return
            }
          }
        })
        searchOfficeNature(data[0].agencyCode).then(res => {
          if (res.success === 1 && data) this.formDataConst.officeNature = res.data.typeName
          else this.formDataConst.officeNature = ''
        })
        searchConstCode(data[0].code).then(res => {
          if (res.success === 1 && res.data.records.length > 0) {
            this.formDataConst.constCode = res.data.records[0].constCode

            this.formDataConst.id = res.data.records[0].id
            this.formDataConst.marketType = res.data.records[0].marketType
            this.formDataConst.constType = res.data.records[0].constType
            this.formDataConst.bizmanType = res.data.records[0].bizmanType
            this.formDataConst.dataSource = res.data.records[0].dataSource
            this.formDataConst.decorationForm = res.data.records[0].decorationForm && res.data.records[0].decorationForm.split(',')
            if (res.data.records[0].decorationRange.includes('DOOR')) this.$set(this.formDataConst, 'decorationRange', ['DOOR', 'STORES'])
            else this.formDataConst.decorationRange = ['STORES']
          } else {
            this.formDataConst.decorationRange = ['STORES']
            this.formDataConst.constCode = ''

            this.formDataConst.id = ''
            this.formDataConst.marketType = ''
            this.formDataConst.constType = ''
            this.formDataConst.bizmanType = ''
            this.formDataConst.dataSource = ''
            this.formDataConst.decorationForm = []
          }
        })

        this.formDataConst.shopMarketLevel = data[0].marketLevelCode// 市场层级
        this.formDataConst.shopCode = data[0].code// 门店编码
        this.formDataConst.shopName = data[0].name// 门店名称
        this.formDataConst.shopBizType = data[0].businessType.split(',')// 门店业务类型
        this.formDataConst.clientName = data[0].customerName// 所属客户
        this.formDataConst.clientCode = data[0].customerCode// 所属客户
        this.formDataConst.officeCode = data[0].agencyCode// 所属办事处
        this.formDataConst.officeName = data[0].agencyName// 所属办事处
        this.formDataConst.shopType = data[0].shopClassify// 门店类型
        this.formDataConst.shopCityLevel = data[0].cityLevel// 门店城市级别
        this.formDataConst.businessStatus = data[0].businessStatus// 门店营业状态
        this.formDataConst.shopAddress = data[0].shopAddr// 门店详细地址
        this.formDataConst.shopArea = data[0].operateArea// 门店面积
        this.$refs.refForm1.validateField('shopCode')
      } else {
        this.clearFormConst()
      }
    },
    clearFormConst() {
      this.formDataConst.shopCode = ''// 门店编码
      this.formDataConst.shopName = ''// 门店名称
      this.formDataConst.shopMarketLevel = ''
      this.formDataConst.shopBizType = []// 门店业务类型
      this.formDataConst.constCode = ''// 门店建设项目号
      this.formDataConst.officeNature = ''// 办事处性质
      this.formDataConst.clientName = ''// 所属客户
      this.formDataConst.clientCode = ''// 所属客户
      this.formDataConst.officeCode = ''// 所属办事处
      this.formDataConst.officeName = ''// 所属办事处
      this.formDataConst.shopType = ''// 门店类型
      this.formDataConst.customerName = ''// 经销商
      this.formDataConst.customerPhone = ''// 经销商电话
      this.formDataConst.shopCityLevel = ''// 门店城市级别
      this.formDataConst.businessStatus = ''// 门店营业状态
      this.formDataConst.shopAddress = ''// 门店详细地址
      this.formDataConst.shopArea = undefined// 门店面积
    },
    // 删除文件
    removeFile({ list, imgLength }) {
      this.fileTypeList[0].fileList = list
      this.imgLength = imgLength
    },
    // 文件上传成功
    uploadSuccessFile({ list, imgLength }) {
      this.fileTypeList[0].fileList = list
      this.imgLength = imgLength
    },
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.belongRegionOptions = res.data.records
      })
    },
    async getDictByPatchTypeAll() {
      const { DECORATION_RANGE, MARKET_TYPE, BIZMAN_TYPE, DECORATION_FORM, BIZ_TYPE, DATA_FROM } =
       await getDictByPatchType(['DECORATION_RANGE', 'MARKET_TYPE', 'BIZMAN_TYPE', 'DECORATION_FORM', 'BIZ_TYPE', 'DATA_FROM'])
      this.buildRangeOptions = DECORATION_RANGE
      this.marketTypeOptions = MARKET_TYPE// 报图类型
      this.bizmanTypeOptions = BIZMAN_TYPE
      this.decorationOptions = DECORATION_FORM
      this.bizTypeOptions = BIZ_TYPE// 业务类型
      this.dataSorceOptions = DATA_FROM
    },
    async getDictByPatchTypeShop() {
      const { SHOP_TYPE, CITY_LEVEL, SHOP_BIZ_STATE } =
       await getDictByPatchType(['SHOP_TYPE', 'CITY_LEVEL', 'SHOP_BIZ_STATE'])
      this.shopTypeOptions = SHOP_TYPE// 门店类型
      this.cityLevelOptions = CITY_LEVEL// 城市级别
      this.businessStateOptions = SHOP_BIZ_STATE// 门店营业状态
    },
    async   submitForm(submitType) {
      this.$refs['refForm1'].validate((valid1) => {
        if (valid1) {
          this.$refs['refForm2'].validate((valid2) => {
            if (valid2) {
              if (this.imgLength < 5) {
                this.$message.warning('卖场内部大场景照片不能少于5张')
                return
              }
              if (this.formData.isShopRemove === 1) this.formData.unremoveReason = ''
              if (submitType === 2) {
                this.submitLoading = true
                // 提交时才生成申请人，申请时间
                this.formData.applicantName = this.formData.applicantName || this.$store.getters.user.data.userName
                this.formData.applicantCode = this.formData.applicantCode || this.$store.getters.user.data.account
                this.formData.applyTime = this.formData.applyTime || nowTime()
              } else this.saveLoading = true
              this.dataLoading = true
              this.formDataConst.shopBizType = this.formDataConst.shopBizType.join(',')
              this.formDataConst.decorationRange = this.formDataConst.decorationRange.join(',')
              this.formDataConst.decorationForm = this.formDataConst.decorationForm.join(',')
              this.formData.reportPicZone = this.formData.reportPicZone.join(',')
              this.$set(this.formData, 'isStrategyMarket', this.formDataConst.isStrategyMarket)
              this.formData.shopConstructDTO = this.formDataConst

              this.formData.decorationRange = this.formDataConst.decorationRange// 外层formData也要放入门店装修范围。。。
              this.formData.decorationForm = this.formDataConst.decorationForm// 外层formData也要放入门店装修形式。。。
              this.$set(this.formData, 'shopAttachmentDTOList', [...this.fileTypeList[0].fileList, ...this.originImgList[0].fileList, ...this.otherFileList])
              const data = { ...this.formData, ...{
                applyDheadArea: this.formData.decorationRange.includes('DOOR') ? this.formData.applyDheadArea : 0 },
              refurbishArea: this.formData.refurbishArea || 0,
              expansionArea: this.formData.expansionArea || 0
              }
              saveMapData(data, submitType).then(res => {
                if (res.success === 1) {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.$refs.refForm1.clearValidate()
                  this.$refs.refForm2.clearValidate()
                  this.$store.dispatch('views/goBack')// 返回列表页
                  this.saveLoading = false
                  this.dataLoading = false
                }
              }).catch(() => {
                this.saveLoading = false
                this.dataLoading = false
              })
            } else {
              this.$message.warning('请完善测绘申请信息')
            }
          })
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
